﻿package com.flashframeless.gallery.modules.thumbs {
	
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;

	import com.flashframeless.components.ui.scrollBar.ScrollBar;
	import com.flashframeless.components.ui.scrollBar.ScrollBarEvent;
	import com.flashframeless.net.DiscoveryHost;

	import gs.TweenLite;
	import gs.easing.Quint;
	
	public class Thumbs extends MovieClip {
		
		private var _arrThumbs		: Array;
		private var _alvo			: Sprite;
		private var _mask			: Sprite;
		private var _scroll			: ScrollBar;
		private var i				: uint;
		private var _scrollPercent	: Number;
		private const NUMBER_LINES	: uint = 3;
		private const PADDING		: uint = 150;
		
		private var tWidth:uint;
		private var tHeight:uint;
		
		public function Thumbs() {
			
			instanciate();
			
		}
		
		public function init():void {
			
			createThumbs();
			
		}
		
		private function instanciate():void {
			
			_mask 	= maskMc;
			_scroll = scrollMc;
			
			_arrThumbs 	= new Array();
			
			var tempArray:Array;			
			
			setupInteractions();
			
		}
		
		private function setupInteractions():void {
			
			//createThumbs();
			
		}
		
		private function createThumbs():void {
			
			_alvo 		= new Sprite();
			
			var item:ThumbItem;
			var posX:uint;
			var posY:uint;
			
			var breakLine:uint = Math.ceil( _arrThumbs.length / NUMBER_LINES );
			
			/*
			if ( !( breakLine % 2 ) ) {
				
				breakLine++;
				
			}
			*/
			
			for ( i = 0; i < _arrThumbs.length; i++ ) {
				
				item = new ThumbItem();
				item.type 	= i % 2 ? 'small' : 'big';
				item.label 	= _arrThumbs[i].name.toUpperCase();
				item.image 	= DiscoveryHost.mediaPath + _arrThumbs[i].image;
				item.data	= _arrThumbs[i];
				
				if ( !( i % breakLine ) && i != 0 ) {
					
					posX = 0;
					
					if ( posY / item.bgMc.height < NUMBER_LINES - 1 ) {
						
						posY += item.bgMc.height;
						
					}
					
				}
				
				item.x = posX;
				item.y = posY;				
				
				posX += item.bgMc.width;				
				
				_alvo.addChild( item );
				_arrThumbs[i].clip = item;
				
				tWidth 	= _alvo.width;
				tHeight = _alvo.height;
				
			}
			
			_mask.width 	= stage.stageWidth - this.x;
			_mask.height	= _alvo.height;
			
			_scroll.y = Math.round( _alvo.y + _alvo.height + _scroll.height );
			
			if ( _alvo.width > _mask.width ) {
				
				var percent:Number =  ( stage.stageWidth - PADDING ) / _alvo.width;
				
				_scroll.size = { width:_scroll.height, height:_mask.width, percent:percent };
				_scroll.setLimits();
				_scroll.scrollPercent = 0;
				
			} else {
				
				_scroll.scrollPercent = 0;
				TweenLite.to( _scroll, 0, { autoAlpha:0, ease:Quint.easeOut } );
				
			}
			
			_alvo.mask = _mask;
			
			activeListeners();
			addChild( _alvo );
			
		}
		
		private function onOver( evt:MouseEvent ):void {
			
			for ( i = 0; i < _arrThumbs.length; i++ ) {
				
				if ( _arrThumbs[i].clip != evt.currentTarget ) {
					
					TweenLite.to( _arrThumbs[i].clip, .5, { alpha:.2, ease:Quint.easeOut } );
					
				}
				
			}
			
		}
		
		private function onOut( evt:MouseEvent ):void {
			
			for ( i = 0; i < _arrThumbs.length; i++ ) {
				
					TweenLite.to( _arrThumbs[i].clip, .5, { alpha:1, ease:Quint.easeOut } );
				
			}
			
		}
		
		private function onClick( evt:MouseEvent ):void {
			
			this['parent'].item = evt.currentTarget.data;
			dispatchEvent( new Event( Event.CHANGE ) );
			
		}
		
		public function updateSize( time:Number = .5 ):void {
			
			var _this:Thumbs = this;
			
			TweenLite.to( this, time, { 				
				
				x:Math.max( PADDING, Math.round( stage.stageWidth / 2 - tWidth / 2 ) ),
				y:Math.max( stage.stageHeight / 2 - tHeight / 2, 0 ),
				ease:Quint.easeOut,
				
				onUpdate:function() {
					
					_mask.width = stage.stageWidth - _this.x;
					
					if ( tWidth > _mask.width ) {
						
						var percent:Number =  ( stage.stageWidth - PADDING ) / tWidth;
						
						TweenLite.to( _scroll, .3, { autoAlpha:1, ease:Quint.easeOut } );
						_scroll.size = { width:_scroll.height, height:_mask.width, percent:percent };
						_scroll.setLimits();
						_scroll.scrollPercent = 0;
						
					} else {
						
						_scroll.scrollPercent = 0;
						TweenLite.to( _scroll, .3, { autoAlpha:0, ease:Quint.easeOut } );
						
					}
					
				}
				
			} );
			
		}
		
		public function activeListeners( booVar:Boolean = true ):void {
			
			var method:String = booVar ? 'addEventListener' : 'removeEventListener';
			
			for ( i = 0; i < _arrThumbs.length; i++ ) {
				
				_arrThumbs[i].clip.buttonMode = booVar;
				_arrThumbs[i].clip[method]( MouseEvent.MOUSE_OVER, 	onOver 	);
				_arrThumbs[i].clip[method]( MouseEvent.MOUSE_OUT, 	onOut 	);
				_arrThumbs[i].clip[method]( MouseEvent.CLICK, 		onClick );
				
			}
			
			_scroll[method]( ScrollBarEvent.UPDATE, onUpdate );
			_scroll[method]( ScrollBarEvent.UPDATE, onUpdate );
			_scroll.scrollPercent = 0;		
			
		}
		
		/**
		 * Scroll Handler.
		 */
		private function onUpdate( e:ScrollBarEvent ):void {
			/*
			_scrollPercent = e.scrollValue;
			
			var limit:Number = tWidth - _mask.width;
			
			TweenLite.to( _alvo, 1, { x:Math.round( _mask.x - ( limit * _scrollPercent ) ), ease:Quint.easeOut } );
			*/
		}
		
		public function set arrThumbs( data:Array ) {
			
			_arrThumbs = data;
			
		}
		
	}
	
}